<template>
	<view class="content">
		<Layout>
			<template #top>
				<view class="title"> 首页 </view>
				<view class="search">
					<image mode="heightFix" class="search-icon" src="../../static/imgs/search-icon.png"></image>
					<input class="search-input" confirm-type="search" placeholder="请输入关键字" v-model="searchValue" />
					<image mode="heightFix" class="search-btn" src="../../static/imgs/search-btn.png"></image>
				</view>
				
				<view class="swiper-box">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<image mode="heightFix" class="swiper-img" src="../../static/imgs/banner1.jpg"></image>
						</swiper-item>
						<swiper-item>
							<image mode="heightFix" class="swiper-img" src="../../static/imgs/banner2.jpg"></image>
						</swiper-item>
					</swiper>
				</view>
			</template>
			<template #bottom>
				<view class="goods-content">
					<view class="left-menu">
						<template v-for="({ name, img }, index) in types" :key="index">
							<view class="menu-item"  @click="tapType(index)" :class="[activeType === index && 'active-type']">
								<image mode="heightFix" :src="img"></image>
								<text>{{ name }}</text>
							</view>
							<view class="menu-line"></view>
						</template>
					</view>
					<scroll-view class="right-content" scroll-y>
						<view class="goods-item" v-for="({ name, decribe, img }, index) in goods" :key="index" @click="tapGoods()">
							<image mode="heightFix" :src="img"></image>
							<view class="goods-name">{{ name }}</view>
							<view class="goods-decribe">{{ decribe }}</view>
						</view>
					</scroll-view>
				</view>
			</template>
		</Layout>
		
	</view>
</template>

<script>
	import Layout from "@/layout/index.vue"
	export default {
		components: {
			Layout
		},
		data() {
			return {
				searchValue: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				activeType: 0,
				types: [
					{
						name: '红茶',
						img: '../../static/imgs/type-icon1.png'
					},
					{
						name: '绿茶',
						img: '../../static/imgs/type-icon2.png'
					}
				],
				
				goods: [
					{
						name: "特技绿茶",
						decribe: "严选清明前采摘茶叶，每一口都能喝到春天",
						img: "../../static/imgs/goods1.jpg"
					},
					{
						name: "特技绿茶",
						decribe: "严选清明前采摘茶叶，每一口都能喝到春天",
						img: "../../static/imgs/goods1.jpg"
					},
					{
						name: "老树红茶",
						decribe: "严选清明前采摘茶叶，每一口都能喝到春天",
						img: "../../static/imgs/goods2.jpg"
					},
					{
						name: "老树红茶",
						decribe: "严选清明前采摘茶叶，每一口都能喝到春天",
						img: "../../static/imgs/goods2.jpg"
					}
				]
			}
		},
		methods: {
			tapType(index) {
				this.activeType = index
			},
			tapGoods() {
				uni.navigateTo({
					url: '/pages/detail/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.content {
		height: 100%;
	}
	// .status_bar {
 //        height: var(--status-bar-height);
 //        width: 100%;
 //    }
	.search {
		height: 64rpx;
		width: 694rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 2rpx 2rpx 2rpx 24rpx;
		
		.search-icon {
			height: 40rpx;
		}
		.search-btn {
			height: 60rpx
		}
		.search-input {
			flex-grow: 1;
			
		}
	}
	.swiper-box {
		margin: 30rpx auto 0 auto;
		width: 710rpx;
		
		.swiper-img {
			height: 275rpx;
			border-radius: 40rpx;
		}
	}
	.goods-content {
		transform: translateY(50rpx);
		/*  #ifdef  MP  */
		transform: translateY(150rpx);
		/*  #endif  */
		
		
		display: flex;
		width: 710rpx;
		margin: 0 auto;
		height: calc(100% - 200rpx);
		max-height: calc(100% - 200rpx);
		.left-menu {
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			background-color: #fff;
			width: 200rpx;
			text-align: center;
			overflow: hidden;
			.menu-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 200rpx;
				image {
					height: 82rpx;
				}
				&.active-type {
					background-image: linear-gradient(to right, #FAC671, #FEECC6);
				}
			}
			.menu-line {
				width: 90%;
				margin: 0 auto;
				height: 1rpx;
				background-color: #C6B89C;
				opacity: 0.3;
				// box-shadow: #000 0 -1rpx 2rpx 0;
			}
		}
		.right-content {
			flex-grow: 1;
			background-color: #FFEAC1;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			padding: 24rpx 12rpx;
			.goods-item {
				background-color: #fff;
				border-radius: 30rpx;
				padding: 12px;
				margin-bottom: 24rpx;
				image {
					height: 194rpx;
					border-radius: 30rpx;
				}
				.goods-name {
					font-size: 42rpx;
				}
				.goods-decribe {
					font-size: 30rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>
